<template>
    <div class="header-container">
        <div class="l-content">
            <!-- 菜单图标区域 -->
            <el-button style="margin-right: 20px;" @click="handleMeue" icon="el-icon-menu" size="mini"></el-button>
            <!-- 面包屑 获取store中的tabsList数组中的值-->
            <el-breadcrumb separator="/">
                <el-breadcrumb-item v-for="i in tags" :key="i.path" :to="{ path: i.path }">
                    {{ i.label }}
                </el-breadcrumb-item>
            </el-breadcrumb>


        </div>
        <!-- 右侧头像区域 -->
        <div class="r-content">
            <el-dropdown>
                <!-- 头像区域 -->
                <span class="el-dropdown-link">
                    <img class="user" src="../assets/images/user.png" alt="">
                </span>
                <!-- 下拉栏区域 -->
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item command="a">个人中心</el-dropdown-item>
                    <el-dropdown-item command="b">退出</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
        </div>
    </div>
</template>

<script>
// 引入vuex
import { mapState } from 'vuex'
export default {
    // name: 'CommonHeader',
    data() {
        return {

        }
    },
    methods: {
        handleMeue() {
            this.$store.commit('collapseMenu')
        }
    },
    computed: {
        //使用...mapState辅助函数结构出state中的数据
        ...mapState({
            tags: state => state.tab.tabsList
        })
    }
}

</script>

<style lang="less" scoped>
.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 100%;
    background-color: #333;
}

.icons {
    width: 20px;
    height: 20px;

}

.l-content {
    display: flex;
    align-items: center;

    .el-button {
        margin-right: 20px;
    }

    .text {
        color: #fff;
    }
}

.r-content {
    .user {
        width: 40px;
        height: 40px;
        border-radius: 50%;
    }
}

.l-content {
    display: flex;
    align-items: center;

    // 样式的穿刺
    /deep/.el-breadcrumb {
        .el-breadcrumb__inner {
            font-weight: normal;

            &.is-link {
                color: #666; // 非最后一个子项的链接颜色
            }

        }

        // 只选择最后一个子项的 .el-breadcrumb__inner
        &:last-child .el-breadcrumb__inner {
            color: #fff; // 只有最后一个子项变成白色
        }

        // 选择倒数第一个 .el-breadcrumb__inner
        // .el-breadcrumb__inner:nth-last-child(1) {
        //     color: #fff; // 使最后一个面包屑的文本颜色为白色
        // }
    }

}

:deep(.bread span) {
    color: #fff !important;
    cursor: pointer !important;
}
</style>